<template>
  <basic-container>
    <div class="filter-container">
      <el-button
        type="primary"
        @click.stop="handleManage"
        icon="el-icon-plus"
        size="mini"
        >导入商品</el-button
      >
      <el-input
        v-model="list.title"
        size="small"
        clearable
        placeholder="商品名称"
        style="width: 220px"
        class="filter-item"
        @keyup.enter.native="loadList"
      />
      <!-- <el-select
        v-model="list.status"
        size="small"
        placeholder="上线状态"
        class="filter-item"
        clearable
      >
        <el-option
          v-for="opt in $constants.goodsStatusOptions"
          :key="opt.value"
          :label="opt.title"
          :value="opt.value"
        />
      </el-select> -->
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-refresh"
        @click="loadList"
        >搜索</el-button
      >
    </div>
    <el-table
      v-loading="listLoading4GoodsSku"
      :data="list"
      height="600"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column> -->
      <el-table-column label="商品标题" width="200px" align="center">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="商品副标题" width="200px" align="center">
        <template slot-scope="scope">{{ scope.row.subTitle || "" }}</template>
      </el-table-column>

      <el-table-column label="商品分类" width="120px" align="center">
        <template slot-scope="scope">{{ scope.row.categoryName }}</template>
      </el-table-column>

      <el-table-column label="商品主图" width="130px" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.mainImg | imgUrl" alt style="height: 60px" />
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100px" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusColorFilter">{{
            scope.row.status | statusFilter
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" width="100px" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.checkStatus | checkStatusColorFilter">{{
            scope.row.checkStatus | checkStatusFilter
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核备注" width="160px" align="center">
        <template slot-scope="scope">{{ scope.row.checkRemark }}</template>
      </el-table-column>
      <el-table-column label="审核人" width="100px" align="center">
        <template slot-scope="scope">{{ scope.row.checkOperator }}</template>
      </el-table-column>
      <el-table-column label="商品销售价" width="100px" align="center">
        <template slot-scope="scope">{{ scope.row.salePrice }}</template>
      </el-table-column>

      <el-table-column label="商品市场价" width="100px" align="center">
        <template slot-scope="scope">{{ scope.row.marketPrice }}</template>
      </el-table-column>

      <el-table-column label="商品库存" width="100px" align="center">
        <template slot-scope="scope">{{ scope.row.stockNum }}</template>
      </el-table-column>

      <el-table-column label="商品销量" width="100px" align="center">
        <template slot-scope="scope">{{ scope.row.saleNum }}</template>
      </el-table-column>
      <el-table-column label="排序" width="100px" align="center">
        <template slot-scope="scope">{{ scope.row.sortNum }}</template>
      </el-table-column>

      <el-table-column label="创建时间" width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.modifyTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="130"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="delGoodsSku(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        :current-page.sync="page.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="goodsManageDialogShowed"
      title="商品管理"
      width="1200px"
    >
    已选{{selectGoods.length}}件商品
      <div style="flex:1">
        <el-tag closable @close="handleRemoveThemeGoods(itemIndex,item)" class="selected-theme-goods" v-for="(item,itemIndex) in selectGoods" :key="itemIndex">
          {{item.title}}
        </el-tag>
      </div>
      <el-button type="danger" size="mini" @click="selectdGoodsSku"
        >确认选择</el-button
      >
      <el-table
        v-loading="listLoading4GoodsSku"
        :data="notRelation"
        height="600"
        border
        fit
        @selection-change="handleSelectionChange"
        highlight-current-row
        style="width: 100%"
      >
        <!-- <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column> -->
        <el-table-column label="商品标题" width="200px" align="center">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="商品分类" width="120px" align="center">
          <template slot-scope="scope">{{ scope.row.categoryName }}</template>
        </el-table-column>
        <el-table-column label="商品主图" width="130px" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.mainImg | imgUrl" alt style="height: 60px" />
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100px" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusColorFilter">{{
              scope.row.status | statusFilter
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="100px" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.checkStatus | checkStatusColorFilter">{{
              scope.row.checkStatus | checkStatusFilter
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="商品销售价" width="100px" align="center">
          <template slot-scope="scope">{{ scope.row.salePrice }}</template>
        </el-table-column>
        <el-table-column label="商品库存" width="100px" align="center">
          <template slot-scope="scope">{{ scope.row.stockNum }}</template>
        </el-table-column>
        <el-table-column label="商品销量" width="100px" align="center">
          <template slot-scope="scope">{{ scope.row.saleNum }}</template>
        </el-table-column>
        <el-table-column label="排序" width="100px" align="center">
          <template slot-scope="scope">{{ scope.row.sortNum }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          min-width="160"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button size="mini" v-if="!scope.row.selected" type="primary" @click="handleSelectGoods(scope.row)">选择</el-button>
            <el-button size="mini" v-else type="info" @click="handleSelectGoods(scope.row)">取消选择</el-button>
            <!-- <el-button
              type="primary"
              @click.stop="handleSelectGoods(scope.row)"
              icon="el-icon-edit"
              size="mini"
              >选择</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
      <el-pagination
        :current-page.sync="listRelationPage.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listRelationPage.pageSize"
        :total="totalRelation"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange4GoodsSku"
        @current-change="handleCurrentChange4GoodsSku"
      />
    </div>
      <!-- <goodsIndex :themeId="100" :recomType="1"></goodsIndex> -->
    </el-dialog>
  </basic-container>
</template>

<script>
import * as api from "../../api/api";
import { bannerPosTypes, goodsStatusOptions } from "../../constants/constants";

import goodsIndex from "../goods/index";
const checkStatusOptions = { 1: "待审核", 5: "审核驳回", 10: "审核通过" };
const checkStatusColorOptions = { 1: "danger", 5: "info", 10: "success" };
const publicShowFlagOptions = ["不可见", "可见"];
export default {
  name: "seckill",
  components: {
    goodsIndex,
  },
  filters: {
    checkStatusColorFilter(v) {
      return checkStatusColorOptions[v];
    },
    checkStatusFilter(v) {
      return checkStatusOptions[v];
    },
    statusFilter(value) {
      const b = goodsStatusOptions.filter((el) => el.value === value)[0];
      if (b) {
        return b.title;
      }
      return ""; // #endregion
    },
    statusColorFilter(value) {
      if (value === 1) {
        return "primary";
      } else {
        return "danger";
      }
    },
  },
  data() {
    return {
      listRelation:[],
      listRelationPage:{
        pageNo: 1,
        recomType: 1,
        searchType: 1,
        pageSize: 10,
        status: 1,
        title: "",
      },
      notRelation:[],
      goodsStatusOptions,
      currentRow: {
        themeId: 0,
      },
      selectGoods:[],
      selectGoodsId:[],
      goodsManageDialogShowed: false,
      listLoading4GoodsSku: false,
      total: 0,
      totalRelation:0,
      listLoading: true,
      list: [],
      page: {
        pageNo: 1,
        recomType: 1,
        searchType: 1,
        pageSize: 10,
        status: 1,
        title: "",
      },
    };
  },
  created() {
    this.loadList();
    this.loadNotRelation()
    // this.loadGoodsSku();
  },
  methods: {
    handleRemoveThemeGoods(idx,item){
      item.selected = false;
      this.selectGoods.splice(idx,1);
    },
    handleSelectGoods(row){
      // this.selectGoods.push(row)
      // this.selectGoodsId.push(row.id)
      if(row.selected){
        row.selected = false;
        const idx = this.selectGoods.findIndex(el=>el.id==row.id);
        if(idx > -1) {
          this.selectGoods.splice(idx,1);
        }
        return;
      }
      row.selected = true;
      if(!this.selectGoods.some(el=>el.id==row.id)){
        this.selectGoods.push(row);
      }
    },
    handleSelectionChange(val){
      console.log()
    },
    loadNotRelation(){
      api
      .post("/admin/goods_recommend/goods/list_not_relation", this.page)
      .then((data) => {
        this.notRelation = data.dataList;
        this.totalRelation= data.total
      });
    },
    selectdGoodsSku() {
      console.log(this.selectGoods)
      let ids=[]
      this.selectGoods.forEach((data)=>{
        ids.push(data.id)
      })
       if(this.selectGoods.length == 0) {
        this.$message.error('请选择至少一个商品');
        return;
      }

      api
      .post("/admin/goods_recommend/goods/add_relation",{
        recomType:1,
        goodsId:ids
      })
      .then((data) => {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
        this.selectGoods=[]
        this.goodsManageDialogShowed = false;
        this.loadList()
      });
    },
    handleManage(row) {
      this.currentRow = row;
      this.goodsManageDialogShowed = true;
    },
    loadList() {
      api
        .post("/admin/goods_recommend/goods/list_relation", this.page)
        .then((data) => {
          this.list = data.dataList;
          this.total = data.total
        });
    },
  
    delGoodsSku(row) {
      api
        .post("/admin/goods_recommend/goods/delete_relation", {
          recomType: 1,
          goodsId: row.id,
        })
        .then((_) => {
          this.loadList();
        });
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.loadList();
    },
    handleCurrentChange(page) {
      this.page.pageNo = page;
      this.loadList();
    },
    handleSizeChange4GoodsSku(size) {
      this.listRelationPage.pageSize = size;
      this.loadList();
    },
    handleCurrentChange4GoodsSku(page) {
      this.listRelationPage.pageNo = page;
      this.loadList();
    },
  },
};
</script>
